<template>
  <div>
    <a-layout-content
      :style="{
        margin: '24px 16px',
        padding: '24px',
        background: '#fff',
        minHeight: '280px',
      }"
    >
      <div style="margin-bottom: 15px">
        <a-form layout="inline" :form="form" @submit="searchOnClick">
          <a-form-item label="订单号">
            <a-input v-model="orderId" />
          </a-form-item>
          <a-form-item label="身份证号">
            <a-input v-model="idCard" />
          </a-form-item>
          <a-form-item label="物流单号">
            <a-input v-model="courierNumber" />
          </a-form-item>
          <a-form-item label="日期范围">
            <a-range-picker @change="DayTimeOnChange" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit"> 搜索 </a-button>
          </a-form-item>
        </a-form>
      </div>

      <a-table
        :columns="columns"
        :data-source="dataByOrdersList"
        :scroll="{ x: 1300 }"
        :loading="loadingStatus"
        :pagination="false"
        bordered
        rowKey="id"
      >
        <div slot="status" slot-scope="record">
          <a-select default-value="0" @select="selectHandleChange(record.id)">
            <a-select-option value="0"> 待发货 </a-select-option>
            <a-select-option value="1"> 已发货 </a-select-option>
            <a-select-option value="2"> 已完成 </a-select-option>
            <a-select-option value="3"> 已退单 </a-select-option>
          </a-select>
        </div>

        <div slot="caozuo" slot-scope="record">
          <span>
            <a-popconfirm
              v-if="dataByOrdersList.length"
              title="确定要删除?"
              ok-text="是"
              cancel-text="否"
              @confirm="confirm(record.id)"
            >
              <a href="javascript:;"><a-icon type="delete" />删除</a>
            </a-popconfirm>
          </span>
          <span>
            <a-divider type="vertical" />
            <a @click="showModal(record.id, record.courierNumber)"
              ><a-icon type="edit" />修改</a
            >
          </span>
        </div>
      </a-table>
      <a-modal
        title="修改物流单号"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        cancelText="取消"
        okText="确认"
      >
        <div style="padding: 0 20px">
          <a-form-item label="物流单号">
            <a-input v-model="courierNumberValue" />
          </a-form-item>
        </div>
      </a-modal>
      <div style="margin-top: 18px">
        <a-pagination
          :current="this.current"
          :total="this.total"
          :show-total="(total) => `共${total}页`"
          :pageSize="this.pageSize"
          @change="handleTableChange"
        />
      </div>
    </a-layout-content>
  </div>
</template>

<script>
const columns = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id",
    width: 60,
  },
  {
    title: "产品名称",
    dataIndex: "title",
    key: "title",
    width: 200,
  },
  {
    title: "订单号",
    dataIndex: "orderId",
    key: "orderid",
    width: 110,
  },
  {
    title: "收货姓名",
    key: "name",
    dataIndex: "name",
    width: 80,
    scopedSlots: { customRender: "name" },
  },
  {
    title: "身份证号",
    key: "idCard",
    dataIndex: "idCard",
    width: 180,
    scopedSlots: { customRender: "idCard" },
  },
  {
    title: "手机号",
    dataIndex: "phone",
    key: "phone",
    width: 130,
  },
  {
    title: "收货地址",
    dataIndex: "address",
    key: "address",
    width: 200,
  },
  {
    title: "物流单号",
    dataIndex: "courierNumber",
    key: "courierNumber",
    width: 120,
  },
  {
    title: "订单状态",
    dataIndex: "status",
    key: "status",
    width: 125,
    align: "center",
    scopedSlots: { customRender: "status" },
  },
  {
    title: "下单时间",
    dataIndex: "addTime",
    key: "addTime",
    width: 110,
  },
  {
    title: "操作",
    key: "caozuo",
    scopedSlots: { customRender: "caozuo" },
    width: 75,
  },
];
import {
  editCourier,
  getOrdersList,
  searchOrderByAdmin,
  deleteByID,
} from "@/api/index";

export default {
  name: "OrdersList",
  components: { getOrdersList, searchOrderByAdmin, editCourier, deleteByID },
  data() {
    return {
      loadingStatus: true,
      dataByOrdersList: [],
      columns,
      total: 0,
      current: 1,
      pageSize: 5,
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      orderId: "",
      idCard: "",
      courierNumber: "",
      startTime: "",
      endTime: "",
      courierNumberValue: "",
      visible: false,
      confirmLoading: false,
      selectByID: "",
    };
  },
  created() {
    this.getOrders(this.current, this.pageSize);
  },
  methods: {
    //获取列表
    getOrders(page, pageSize) {
      getOrdersList(page, pageSize).then((res) => {
        this.loadingStatus = false;
        // console.log(res.data.data);
        this.total = res.data.data.total;
        this.dataByOrdersList = res.data.data.data;
      });
    },
    //table分页点击事件
    handleTableChange(page, pageSize) {
      this.current = page;
      this.getOrders(page, pageSize);
    },
    //下拉选择框点击事件（table里面的）
    selectHandleChange(id) {
      console.log(id);
    },
    //日期选择框
    DayTimeOnChange(date, dateString) {
      // console.log('选择完日期间隔了', dateString)
      (this.startTime = dateString[0]), (this.endTime = dateString[1]);
    },
    //搜索按钮事件
    searchOnClick(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.current = 1;
          searchOrderByAdmin({
            orderId: this.orderId,
            idCard: this.idCard,
            courierNumber: this.courierNumber,
            startTime: this.startTime,
            endTime: this.endTime,
            page: this.current,
            pageSize: this.pageSize,
          }).then((res) => {
            // console.log("搜索返回：", res.data.data);
            this.total = res.data.data.total;
            this.dataByOrdersList = res.data.data.data;
          });
        }
      });
    },
    confirm(id) {
      // console.log("确认删除", id);
      deleteByID(id).then((res) => {
        // console.log(res.data);
        if (res.data.code != 200) {
          return this.$message.error("删除失败");
        }
        this.$message.success("删除成功");
        return this.getOrders(this.current, this.pageSize);
      });
    },
    showModal(id, courierNumber) {
      this.courierNumberValue = courierNumber;
      this.selectByID = id;
      this.visible = true;
    },
    //模态框确认按钮事件
    handleOk(e) {
      if (!this.courierNumberValue) {
        return this.$message.warning("物流单号不能为空");
      }
      console.log(
        "模态框确认了,id:",
        this.selectByID,
        "courierNumberValue:",
        this.courierNumberValue
      );
      this.confirmLoading = true;
      editCourier(this.selectByID, this.courierNumberValue).then((res) => {
        // console.log(res.data);
        if (res.data.code != 200) {
          return this.$message.error("修改失败");
        }
        this.$message.success("修改成功");
        this.confirmLoading = false;
        this.visible = false;
        this.courierNumberValue = "";
        this.getOrders(this.current, this.pageSize);
        return;
      });
    },
    //模态框取消按钮事件
    handleCancel(e) {
      this.visible = false;
    },

    // method方法结束
  },
};
</script>

<style >
</style>